<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Canvas实现各种炫酷的仪表盘动画DEMO演示03</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<style type="text/css">
	body {
		padding: 0;
		margin: 0;
		background: #fff
		}
		.btn-container{
			padding: 1em 0;
			text-align: center;
		}
		.btn-container a{
			display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 5px solid #1d7db1;font-weight: 700;color: #1d7db1;
		}
		.btn-container a:hover,
		.btn-container a:active{
			color: #000;
		}
	.container{
		width: 320px;
		margin: 50px auto;
	}
</style>
<script src="js/gauge.min.js"></script>
</head>
<body>
<div class="zzsc-container">
	<header class="zzsc-header">
		<div class="zzsc-demo center">
		  <a href="index.html">radial</a>
		  <a href="radial-component.html">radial-component</a>
		  <a href="linear-component.html">linear-component</a>
		  <a href="issue-63.html"  class="current">issue-63</a>
		  <a href="async.html">async</a>
		  <a href="scripted.html">scripted</a>
		</div>
	</header>
	<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
	<div class="btn-container">
		<a href="#" onclick="gaugePS.value=570">570</a>
		<a href="#" onclick="gaugePS.value=583">583</a>
		<a href="#" onclick="gaugePS.value=830">830</a>
	</div>
	<div class="container">
		<canvas id="gauge-ps"></canvas>
	</div>
</div>

<script>
	var gaugePS = new RadialGauge({
		renderTo: 'gauge-ps',
		width: 300,
		height: 300,
		units: 'PS',
		minValue: 0,
		maxValue: 1000,
		majorTicks: [
			'0',
			'100',
			'200',
			'300',
			'400',
			'500',
			'600',
			'700',
			'800',
			'900',
			'1000'
		],
		minorTicks: 2,
		ticksAngle: 270,
		startAngle: 45,
		strokeTicks: true,
		highlights  : [
			{ from : 457,  to : 880, color : 'rgba(78,   78, 76, 0.5)' },
			{ from : 880, to : 1000, color : 'rgba(225, 7, 23, 0.75)' }
		],
		valueInt: 1,
		valueDec: 0,
		colorPlate: "#fff",
		colorMajorTicks: "#686868",
		colorMinorTicks: "#686868",
		colorTitle: "#000",
		colorUnits: "#000",
		colorNumbers: "#686868",
		valueBox: true,
		colorValueText: "#000",
		colorValueBoxRect: "#fff",
		colorValueBoxRectEnd: "#fff",
		colorValueBoxBackground: "#fff",
		colorValueBoxShadow: false,
		colorValueTextShadow: false,
		colorNeedleShadowUp: true,
		colorNeedleShadowDown: false,
		colorNeedle: "rgba(200, 50, 50, .75)",
		colorNeedleEnd: "rgba(200, 50, 50, .75)",
		colorNeedleCircleOuter: "rgba(200, 200, 200, 1)",
		colorNeedleCircleOuterEnd: "rgba(200, 200, 200, 1)",
		borderShadowWidth: 0,
		borders: true,
		borderInnerWidth: 0,
		borderMiddleWidth: 0,
		borderOuterWidth: 5,
		colorBorderOuter: "#fafafa",
		colorBorderOuterEnd: "#cdcdcd",
		needleType: "arrow",
		needleWidth: 2,
		needleCircleSize: 7,
		needleCircleOuter: true,
		needleCircleInner: false,
		animationDuration: 1500,
		animationRule: "dequint",
		fontNumbers: "Verdana",
		fontTitle: "Verdana",
		fontUnits: "Verdana",
		fontValue: "Led",
		fontValueStyle: 'italic',
		fontNumbersSize: 20,
		fontNumbersStyle: 'italic',
		fontNumbersWeight: 'bold',
		fontTitleSize: 24,
		fontUnitsSize: 22,
		fontValueSize: 50,
		animatedValue: true
	});
	gaugePS.draw();
	gaugePS.value = "510";
</script>
</body>
</html>